import React, { useEffect, useState } from 'react'
import { Link } from "react-router-dom"
import { useDispatch, useSelector } from 'react-redux'
import { Demo } from '../../../components/Customer/TableComponent'
import { getIdAction } from '../../../store/customerStore/action'
import style from "./index.module.scss"
import { Bounced } from '../../../components/Operating/bounced'

export default function Application() {
    const dispatch = useDispatch()

    const thisId = useSelector((state) => state.customer.id)

    // 表头
    const Columns = [
        {
            title: '编号',
            dataIndex: 'id',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '应用名称',
            dataIndex: 'name',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '版本',
            dataIndex: 'version',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '更新时间',
            dataIndex: 'time',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '更新说明',
            dataIndex: 'txt',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '下载地址',
            dataIndex: 'address',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '操作',
            dataIndex: 'id',
            align: 'center',
            render: (text) => {
                return <>
                    <span className={style.delBtn} data-id={text} onClick={(e) => searchHeight(e)}>编辑 </span>
                    <span className={style.delBtn} data-id={text} onClick={(e) => getID(e)}> 删除</span>
                </>

            }

        },
    ];

    // 列表内容
    const [DataList, setDataList] = useState([
        {
            key: '1',
            id: '1',
            name: '终极版',
            version:'3.0',
            time:'2020-1-10',
            txt: '没有说明',
            address:'http://'
        },
        {
            key: '2',
            id: '2',
            name: '测试版',
            version:'2.0',
            time:'2020-1-10',
            txt: '没有说明',
            address:'http://'
        }
    ]);


    // 删除
    const getID = (e) => {
        // console.log('as', e.target.dataset.id);
        // dispatch(getIdAction(e.target.dataset.id))
        // console.log('修改了', thisId);
        // this.props.history.push('/child02')
        const newData = DataList.filter(item => {
            return item.id != e.target.dataset.id
        })
        setDataList(newData)
    }
    // 弹框
    const [isModalVisible, setIsModalVisible] = useState(false);

    const searchHeight = (e) => {
        console.log(e.target.dataset.id)
        setIsModalVisible(true);
    }

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <div className={style.content}>
            <div className={style.title}>
                <h4>数据列表</h4>
                <div className={style.titleRight}>
                    <button className={style.titleBtn}>发布应用</button>
                </div>

            </div>

            {Demo(Columns, DataList, { total: DataList.length, type: false })}
            {Bounced(isModalVisible, handleOk, handleCancel)}
        </div>
    )
}
